import React from 'react'
import './index.css'
import { Link } from 'react-router-dom'

const TitleList1 = () => {
  return (
    <div className='title-list'>
      转为PDF
      <div className='display-column-1'>
        <Link className='click-block' to='/convert/word2pdf'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>Word转PDF</span>
        </Link>
        <Link className='click-block' to='/convert/excel2pdf'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>Excel转PDF</span>
        </Link>
        <Link className='click-block' to='/convert/ppt2pdf'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>PPT转PDF</span>
        </Link>
        <Link className='click-block' to='/convert/jpg2pdf'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>JPG转PDF</span>
        </Link>
      </div>
    </div>
  )
}

const TitleList2 = () => {
  return (
    <div className='title-list'>
      图片转换
      <div className='display-column-2'>
        <Link className='click-block' to='/convert/word2jpg'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>Word转JPG</span>
        </Link>
        <Link className='click-block' to='/convert/excel2jpg'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>Excel转JPG</span>
        </Link>
        <Link className='click-block' to='/convert/ppt2jpg'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>PPT转JPG</span>
        </Link>
        <Link className='click-block' to='/convert/pdf2jpg'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>PDF转JPG</span>
        </Link>
        <Link className='click-block' to='/convert/word2png'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>Word转PNG</span>
        </Link>
        <Link className='click-block' to='/convert/excel2png'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>Excel转PNG</span>
        </Link>
        <Link className='click-block' to='/convert/ppt2png'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>PPT转PNG</span>
        </Link>
        <Link className='click-block' to='/convert/pdf2png'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>PDF转PNG</span>
        </Link>
      </div>
    </div>
  )
}

const TitleList3 = () => {
  return (
    <div className='title-list'>
      文本转换
      <div className='display-column-3'>
        <Link className='click-block' to='/convert/word2txt'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>Word转TXT</span>
        </Link>
        <Link className='click-block' to='/convert/excel2txt'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>Excel转TXT</span>
        </Link>
        <Link className='click-block' to='/convert/ppt2txt'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>PPT转TXT</span>
        </Link>
        <Link className='click-block' to='/convert/pdf2txt'>
          <img
            src=''
            className='imgStyle'
            alt=' '
          />
          <span>PDF转TXT</span>
        </Link>
      </div>
    </div>
  )
}

function Home() {
  return (
    <div className='content-all'>
      <TitleList1 />
      <TitleList2 />
      <TitleList3 />
    </div>
  )
}

export default Home
